<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		li{
			list-style: none;
			display: none;
		}
		img{
			width: 200px;
			height: 200px;
		}
	</style>
	<body>
		<div id="div">
			<ul id="ul">
				<li id="li" style="display: block;"><img src="images/1.jpg"></li>
				<li><img src="images/2.jpg"></li>
				<li><img src="images/3.jpg"></li>
				<li><img src="images/4.jpg"></li>
			</ul>
		</div>
		<button id="btn1">上一页</button>
		<button id="btn2">下一页</button>
	</body>
	<script>
		var li=document.getElementsByTagName("li");
		var btn1=document.getElementById("btn1");
		var btn2=document.getElementById("btn2");
		var xiabiao=0;
		function sun(){
			for(var a=0;a<li.length;a++){
				li[a].style.display="none"
			}
			li[xiabiao].style.display="block"
		}
         
		btn1.onclick=function(){
			xiabiao --;
			if(xiabiao<0){
				xiabiao=li.length-1;
			}
			 sun()
		}
		btn2.onclick=function(){
			xiabiao ++;
			if(xiabiao==li.length){
				xiabiao=0
			}
			 sun()
		}
	</script>
</html>
